<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="提交到哪里" method="post">
        <input type="text" placeholder="请输入内容:">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>


    <script>
        // 事件源.on事件类型 = 事件处理函数
        var inp  = document.querySelector('input');
        var form = document.querySelector('form');
        // inp.onfocus = function(){
        //     console.log('欢迎光临,楼上男宾一位')
        // }

        // inp.onblur = function(){
        //     alert('客观慢走,我是666下次再找我')
        // }

        // inp.onchange = function(){
        //     // 移入焦点时候的内容 和移出焦点时候的内容做一个对比
        //     // 如果发生变化 触发事件 
        //     console.log('内容改变了');
        // }

        // inp.oninput = function(){
        //     // 输入和删除内容 都会触发 而且是实时触发
        //     console.log('你正在删除或者输入内容')
        // }
        
        //因为 submit是通过form提交出去  reset 是重置整个form 
        // 所以submit事件 和 reset事件只能绑定在form身上 别的地方不生效 

        // form.onsubmit = function(){
        //     console.log('只要你点了提交立马触发')
        // }


        // form.onreset = function(){
        //     console.log('只要你点了重置立马触发')
        // }

    </script>
</body>
</html>